<%-- 
    Document   : deal_detail
    Created on : Sep 21, 2012, 8:31:59 AM
    Author     : DucThien
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
    .deal_detail tr td{
        font-family: Cambria;
        font-size: 12px;
        font-weight: bold;
        padding:4px;
        color: #333333;
    }
    table{
        border-collapse: collapse;
        border-bottom: 1px solid #DDDDDD;
    }
    #content_detail{
        width: 960px;
        float:left;
    }
    .content-top{
        width: 100%;
        height: 290px;
        margin-bottom: 5px;
    }
    .content-top-right-top{
        width: 100%;
        height: 91px;
        text-align: left;
        background-color: #27E884;

    }
    .content-top-right-top p{
        font-family: Cambria;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        margin-left:5px;
    }
    .content-top-left-top{
        width: 100%;
        height: 285px;
        text-align: center;
        padding : 2px 14px;
    }
    .content-top-left-bottom{
        width: 100%;
        height: 22px;

        text-align: center;
    }
    .content-bottom{
        width: 100%;
        height: 500px;
        background-color: #FFFFFF;
    }
    .content-top-left , .content-top-right{
        width: 50%;
        height: 290px;
        float:left;
    }
    .buttonBuyNow{
        text-align:  center;
        padding : 9px 10px;
        font-size: 18px;
        border-radius: 5px;
        color: #FFFFFF;
        background-color: #3F8945;
        font-weight: bold;
        cursor:pointer;
    }
    .buttonBuyNow:hover{
        color: #FFFFFF;
        background-color: #000000;
    }
    #listVote{
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    #listVote table thead > tr > td {
        background-color: #EFEFEF;
        color:#222222;
        text-align: left;
        font-weight: bold;
        padding:10px;
        border-left : 1px solid #333333;
        border-top : 1px solid #333333;
    }
    #listBuyer table thead > tr > td {
        background-color: #EFEFEF;
        color:#222222;
        text-align: left;
        font-weight: bold;
        padding:10px;
        border-left : 1px solid #333333;
        border-top : 1px solid #333333;
    }
    #listBuyer table tbody > tr > td{
        padding : 5px;
        border-left : 1px solid #333333;
        border-top : 1px solid #333333;
    }
    #listBuyer table{
        border-right:1px solid #333333;
    }
    #listVote table{
        border-right:1px solid #333333;
    }
    #listVote table tbody > tr > td{
        padding : 5px;
        border-left : 1px solid #333333;
        border-top : 1px solid #333333;
    }
    #frameVote{
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    #frameVote > div{
        width:100%;
        margin-bottom:15px;
    }
</style>
<div id="content_detail">
    <div class="content-top">
        <div class="content-top-left">
            <div class="content-top-left-top">         
                <div id="faded" style="text-align:center;">
                    <ul  class="faded" style="text-align:center;">
                        <% int indexBanner = 0;%>
                        <c:forEach var="itemBanner" items="${array_banner}" >  
                            <li><a href="#" target="_self"><img src="<c:out value="${itemBanner.banner}"/>" /></a></li>
                                    <% indexBanner += 1;%>
                                </c:forEach>
                    </ul>            
                </div>
            </div>
        </div>
        <div class="content-top-right">
            <div class="content-top-right-top">
                <p>
                    <c:out value="${product.description}" />
                </p>
            </div>
            <table width="100%">
                <tr>
                    <td>
                        <table  class="deal_detail" width="100%" >
                            <tr>
                                <td>Deal Name:</td>
                                <td colspan="3" style="text-align:left; color:#3F8E33; font-size: 18px;"><c:out value="${product.name}" /></td>
                            </tr>
                            <tr>
                                <td>Buy Cost: </td>
                                <td style="font-size:20px;font-weight:bold;color:red;"><fmt:formatNumber type="number" value="${deal.buyCost}"/>VND</td>
                                <td>Time Remaining: </td>
                                <td style="color:red; font-size:25px; font-weight:400px;"><div id="deal_<c:out value="${deal.dealId}" />" class="count_down_detail" title="<c:out value="${deal.endTime}" />" ></div></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="deal_detail" width="100%" style="border-bottom:none;">
                            <tr>                              
                                <td>Cost:</td>
                                <td>Decrease Cost:</td>
                                <td>percent save:</td> 
                                <td rowspan="2">
                                    <c:if test="${flag_deal_top != 'has' }">
                                        <c:if test="${customerIdDealSold != null }">
                                            <span onclick="makeBuyDeal(${deal.dealId},${customerIdDealSold})" class="buttonBuyNow">Buy Now</span>
                                        </c:if>
                                        <c:if test="${customerIdDealSold == null }">
                                            <span style="color: green; font-size: 14px; font-weight: bold;">You don't login yet or <br /> you bought</span>
                                        </c:if>
                                    </c:if>
                                    <c:if test="${flag_deal_top == 'has' }">
                                        <div onclick="showDealDetail(${deal.dealId});" class="buy_now">View Now</div>
                                    </c:if>
                                   
                                </td>
                            </tr>
                            <tr>

                                <td style="color:#000000;font-size:16px;"><fmt:formatNumber type="number" value="${product.cost}"/><br />VND</td>
                                <td style="color:#000000;font-size:16px;"><fmt:formatNumber type="number" value="${deal.decreaseCost}" /><br />VND</td>
                                <td style="color:red; font-size:25px; font-weight:400px;"><c:out value="${deal.percentDiscount}%"/></td>

                            </tr>
                            <tr>
                                <td>Qty Deal Goal:</td>
                                <td>Qty Sold: </td>
                                <td>Qty Remaining:</td>
                                <td>Qty Maximum:</td>
                            </tr>
                            <tr>
                                <td style="color:red;font-size:20px;"><c:out value="${deal.quantityDealAvailable}"/></td>
                                <td id="qtySold" style="color:#000000;font-size:16px;"><c:out value="${deal.quantityDealSold}"/></td>
                                <td id="qtyRemaining"style="color:#000000;font-size:16px;"><c:out value="${deal.quantityDealRemaining}"/></td>
                                <td style="color:#000000;font-size:16px;"><c:out value="${deal.maxDeal}"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <c:if test="${flag_deal_top != 'has' }">
        <div class="content-bottom">
            <div id="tabs" class="htabs">
                <a href="#tab-condition"> condition use deal</a>
                <a href="#tab-vote">list voting</a>
                <a href="#tab-location-map"> location map deal</a>
                <a href="#tab-list-buyer"> list buyer</a>
            </div>
            <div id="tab-condition" style="color:#000000; font-family: Cambria; font-size: 18px; text-align: left; padding-left:30px;" >
                <c:forEach var="itemCondition" items="${array_condition}">
                    <c:if test="${itemCondition != ''}">
                        <p style="padding:5px 0px;">+<c:out value="${itemCondition}" /></p>
                    </c:if>
                </c:forEach>        
            </div>
            <div id="tab-vote" >
                <div id="frameVote">
                    <div>
                        <textarea id="txtVote" name="txtVote" cols="100" rows="7" style="color:#333333; font-size: 13px; font-family: Cambria;"></textarea>
                    </div>
                    <div>
                        <span id="addVote" title="Customer Name" class="buttonBuyNow" style="font-weight:normal;">Add Comment</span>
                    </div>
                   
                    
                    
                </div>
                <div id="listVote">
                    <table width="100%">
                        <thead>
                            <tr>
                                <td>Customer Name</td>
                                <td>Votes</td>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="tab-location-map">
                <div id="googlemap" style="height:500px; width:600px; margin-left:auto ; margin-right: auto;">
                </div>
            </div>
            <div id="tab-list-buyer" >
                <div id="listBuyer" style="width:900px; margin-left: auto ; margin-right: auto;">
                    <table style="width:100%">
                        <thead>
                            <tr>
                                <td>username</td>
                                <td>address</td>
                                <td>email</td>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="item" items="${listDealSold}" >
                                <tr>
                                    <td>${item.username}</td>
                                    <td>${item.address}</td>
                                    <td>${item.email}</td>
                                </tr>
                            </c:forEach>
                       </tbody>
                    </table>
                </div>
            </div>
        </div>
    </c:if>
</div>

<script type="text/javascript"><!--
    $('#tabs a').tabs();
    $(function(){
        //$(".countdown_row").css("font-size","18px");
        var austDay = new Date();
        $(".count_down_detail").each(function (){
            var id = this.id;
            var date = this.title;
            var value = date.split("-");
            var year = parseInt(value[0]);
            var month = parseInt(value[1]);
            var day = parseInt(value[2]);
            austDay = new Date(year,month,day,0,0,0);
            $("#"+id).countdown({until: austDay});
        });   
    }); 
    function makeBuyDeal(id,customerID){
        $.post("./deal?action=updateQuantityBuy",{dealId:id,customerId:customerID},function(data){
            $(".buttonBuyNow").css("display", "none");
            $("#qtySold").text(data);
            var qtyRemaining = $("#qtyRemaining").text();
            $("#qtyRemaining").text(qtyRemaining-1);
        });
    }
    
    $("#addVote").live('click',function(){
        
        $("#listVote table tbody ").append("<tr><td>"+$("#addVote").attr("title")+"</td><td>"+$("#txtVote").val()+"</td></tr>");
    });
</script>
